
goog.provide('gaillard.RestaurantListFragment');

goog.require('goog.dom');
goog.require('goog.ui.Component');
goog.require('goog.ui.Control');
goog.require('gaillard.utils');
goog.require('gaillard.Model');


/**
 * RestaurantListFragment
 * @constructor
 * @extends {goog.ui.Component}
 */
gaillard.RestaurantListFragment = function(model) {
    goog.ui.Component.call(this);
  
    this.setModel(model);
};

goog.inherits(gaillard.RestaurantListFragment, goog.ui.Component);

gaillard.RestaurantListFragment.prototype.createDom = function() {
	throw Error('Impossible to create HeaderFragment from code');
};

gaillard.RestaurantListFragment.prototype.enterDocument = function() {
	gaillard.RestaurantListFragment.superClass_.enterDocument.call(this);
	
    this.getHandler().listen(this.getModel(), gaillard.Model.Datatype.RESTAURANT_LIST, this.restaurantListChanged_);
};

gaillard.RestaurantListFragment.prototype.restaurantListChanged_ = function () {
    var list = this.getModel().get(gaillard.Model.Datatype.RESTAURANT_LIST);
    this.clearRestaurantList();
    for (var i = 0; i < list.length; i+=1) {
        this.addRestaurant(i, list[i]);                
    }
};

gaillard.RestaurantListFragment.prototype.clearRestaurantList = function() {
    this.removeChildren(true);
};

gaillard.RestaurantListFragment.prototype.addRestaurant = function(position, restaurant) {	
	var item = new gaillard.RestaurantItem(this.model_, position, restaurant);
    this.addChild(item, true);
};

/**
 * RestaurantItem
 * @constructor
 * @extends {goog.ui.Control}
 */
gaillard.RestaurantItem = function (model, position, restaurant) {
	goog.ui.Control.call(this);
   
	this.restaurant_ = restaurant;
	this.position_ = position;
	this.setModel(model);
    this.setHandleMouseEvents(true);
	
};

goog.inherits(gaillard.RestaurantItem, goog.ui.Control);

gaillard.RestaurantItem.templateItem = '<a class="grid-item a-nodecodation inline-block" href="#"><div class="grid-item-content"><h1 class="grid-item-name">{{name}}</h2><p>{{description}}</p></div><div class="grid-item-extra"><div class="grid-item-extra-content">Pouet</div></div></a>';

gaillard.RestaurantItem.prototype.createDom = function() {
	var itemStr = gaillard.utils.renderTemplate(gaillard.RestaurantItem.templateItem, this.restaurant_);
	return this.decorateInternal(goog.dom.htmlToDocumentFragment(itemStr));
};

gaillard.RestaurantItem.prototype.decorateInternal = function(element) {
	gaillard.RestaurantItem.superClass_.decorateInternal.call(this, element);
	
    var eh = this.getHandler();
    eh.listen(element, goog.events.EventType.CLICK, this.click_);
    eh.listen(this, goog.ui.Component.EventType.ENTER, this.mouseEnter_);
    eh.listen(this, goog.ui.Component.EventType.LEAVE, this.mouseLeave_);
};

gaillard.RestaurantItem.prototype.click_ = function () {
    this.getModel().set(gaillard.Model.Datatype.SELECTED_RESTAURANT, this.position_);
};

gaillard.RestaurantItem.prototype.mouseEnter_ = function () {
    this.getModel().set(gaillard.Model.Datatype.FOCUSED_RESTAURANT, this.position_);
};

gaillard.RestaurantItem.prototype.mouseLeave_ = function () {
    this.getModel().set(gaillard.Model.Datatype.FOCUSED_RESTAURANT, -1);
};





